Skip to content

Conversation

@KimKyuHoi
Copy link
Collaborator

@KimKyuHoi KimKyuHoi commented Feb 5, 2025

Pull request

Related issue

Motivation and context

  • 사이드바 디자인을 개선할 필요가 있었습니다.
  • 조금 더 Primary color(orange)에 맞는 사이드 바가 필요했습니다.

Solution

  • Global css 개선
    • packages>ui>styles>global.css내에서 수정하였습니다.
@layer base {
  :root {
    /* 메인 사이드바 스타일링 */
    --sidebar-background: 24 85% 60%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 0 0% 100%;
    --sidebar-primary-foreground: 24 85% 60%;

    /* 메뉴 아이템 스타일링 */
    --sidebar-accent: 24 85% 55%;
    --sidebar-accent-foreground: 0 0% 100%;

    /* 구분선과 테두리 */
    --sidebar-border: 0 0% 100% / 0.1;
    --sidebar-ring: 0 0% 100%;

    /* 활성 상태 스타일링 */
    --sidebar-active: 0 0% 100% / 0.2;
    --sidebar-active-foreground: 0 0% 100%;
  }

How has this been tested

image

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the docs/CONTRIBUTING.md document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

@KimKyuHoi KimKyuHoi added 💄 Design 프론트엔드 CSS 관련 이슈 🖥️ FE 프론트엔드 마일스톤 내에는 해야하지만 스프린트내에 미뤄도 되는 것들 labels Feb 5, 2025
@KimKyuHoi KimKyuHoi added this to the 주톡피아 마일스톤2 milestone Feb 5, 2025
@KimKyuHoi KimKyuHoi requested a review from handje February 5, 2025 07:16
@KimKyuHoi KimKyuHoi self-assigned this Feb 5, 2025
Copy link
Collaborator

@handje handje left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

primary색을 드디어 쓸 수 있네요!
큰 문제는 아니지만 , 사이드바의 하위메뉴 호버할 때 div색상이 변하는게 오른쪽으로 살짝 치우쳐있는건 애니메이션이랑 어울리게하시려고 의도하신걸까요?

@KimKyuHoi
Copy link
Collaborator Author

primary색을 드디어 쓸 수 있네요! 큰 문제는 아니지만 , 사이드바의 하위메뉴 호버할 때 div색상이 변하는게 오른쪽으로 살짝 치우쳐있는건 애니메이션이랑 어울리게하시려고 의도하신걸까요?

아 AI 디자이너분의 추천을 받긴했습니다! ㅎㅎ,,조금 어색한가요?

@handje
Copy link
Collaborator

handje commented Feb 6, 2025

primary색을 드디어 쓸 수 있네요! 큰 문제는 아니지만 , 사이드바의 하위메뉴 호버할 때 div색상이 변하는게 오른쪽으로 살짝 치우쳐있는건 애니메이션이랑 어울리게하시려고 의도하신걸까요?

아 AI 디자이너분의 추천을 받긴했습니다! ㅎㅎ,,조금 어색한가요?

의도한거라면 괜찮을 것 같습니다 ! merge해주세요 👍 👍

@KimKyuHoi KimKyuHoi merged commit 0558d14 into dev Feb 6, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

마일스톤 내에는 해야하지만 스프린트내에 미뤄도 되는 것들 💄 Design 프론트엔드 CSS 관련 이슈 🖥️ FE 프론트엔드

Projects

None yet

Development

Successfully merging this pull request may close these issues.

사이드바 디자인적으로 개선하기

3 participants